<template>
	<div class="rounded-md overflow-hidden bg-bg-3 relative p-2 pl-10">
		<betslip-info-combo :data="betslipStore.combo" :selections="selections"></betslip-info-combo>
		<div
			v-for="item in betslipStore.list"
			:key="item.id"
			class="items-center text-sm text-t-3 truncate">
			<betting-name
				:id="getSelection(item)?.id"
				:betslipLine="getSelection(item)?.betslipLine"
				:points="getSelection(item)?.points"
				:side="getSelection(item)?.side" />
			{{ matchStore.getMarket(item.eventId, item.marketId)?.marketTypeName }}
		</div>
		<betslip-transition :status="betslipStore.combo.status" />
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { BettingName } from '@/components/betting'
import BetslipInfoCombo from '../betslip-info/betslip-info-combo.vue'
import BetslipTransition from '../betslip-transition.vue'
import { useMatchStore, useBetslipStore } from '@/store'
import { Selection, BetslipInfoType } from '@/types'
import { useBetslip } from '@/hooks'

const matchStore = useMatchStore()
const betslipStore = useBetslipStore()

useBetslip(betslipStore.combo)

const getSelection = (item: BetslipInfoType) =>
	matchStore.getSelection(item.eventId, item.marketId, item.id)

const selections = computed(() => {
	const res: Selection[] = []
	betslipStore.list.forEach((item) => {
		const selection = matchStore.getSelection(item.eventId, item.marketId, item.id)
		if (selection) {
			res.push(selection)
		}
	})
	return res
})
</script>
